<template>
  <el-card class="goods-card" shadow="hover">
    <div class="goods-card-image">
      <div class="goods-card-image-inner">
        <img :src="data.picture"/>
      </div>
    </div>
    <div class="goods-card-info">
      <div class="flex-box">
        <div class="flex-grow-1 color-script ellipsis1">{{data.code}}</div>
        <div>&nbsp;</div>
        <div class="color-script ellipsis1 goods-card-storecount">{{data.storeCount}}</div>
      </div>
      <div class="goods-card-name ellipsis2">{{data.name}}</div>

      <div class="flex-box">
        <div class="goods-card-price">￥{{data.price}}</div>
        <del class="goods-card-origin-price color-script flex-grow-1">{{data.originPrice}}</del>
        <div class="goods-card-cart" @click="clickCart">
          <svg-icon icon-class="cart"/>
        </div>
      </div>
    </div>
    <GoodsPopCard :visible.sync="visible" :data="data" :onClose="closeCart"/>
  </el-card>
</template>
<script src="./component"/>
<style rel="stylesheet/scss" lang="scss" src='./style.scss'/>
